/**
*@Create:YMHUI
*@DateTime:2019/10/169:22
*@Description:TODO
**/
<template>
    <div>
        <el-row>
            <el-row v-if="questionnaire.state === '未发布'" style="text-align: right">
                <el-button type="text" icon="el-icon-edit"
                           @click="editDialogVisible = true"></el-button>
                <el-button :disabled="fill.sort === 1" @click="questionMove(-1)" type="text" icon="el-icon-top"/>
                <el-button :disabled="fill.sort === questionnaire.questions.length" @click="questionMove(1)"
                           icon="el-icon-bottom"
                           type="text"/>
                <el-button type="text" icon="el-icon-delete" @click="deleteFillUp"/>
            </el-row>
            <el-row>
                <el-form :inline="true">
                    <el-form-item :label="fill.sort.toString()">
                        <span>{{fill.topic}}</span>
                    </el-form-item>
                </el-form>
            </el-row>
        </el-row>
        <!--        </el-popover>-->
        <el-dialog title="题目编辑" width="40%" :visible.sync="editDialogVisible">
            <el-form label-width="60px">
                <el-form-item label="标题">
                    <el-input v-model="fill.topic" type="textarea" rows="2" style="width: 50em"></el-input>
                </el-form-item>
            </el-form>
            <el-row style="text-align: center">
                <el-button @click="editFinish" type="primary" size="mini">编辑完成</el-button>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>
    import util from "../../common/util";
    import {mapActions, mapGetters} from "vuex";
    import Vue from 'vue'

    export default {
        name: "GapFill",
        props: {
            fill: Object
        },
        computed: {
            ...mapGetters('questionnaire', [
                'currentQuestionnaire'
            ])
        },
        data() {
            return {
                popoverVisible: false,
                questionnaire: {},
                up: false,
                down: false,
                editDialogVisible: false
            }
        },
        methods: {
            ...mapActions('questionnaire', [
                'setCurrentQuestionnaire',
                'deleteFillUpAct'
            ]),
            editFinish() {
                this.refreshDimensionQuestions(this.questionnaire.dimensions);
                this.setCurrentQuestionnaire(this.questionnaire);
                this.editDialogVisible = false;
            },

            refreshDimensionQuestions(dimensions) {
                dimensions.forEach(dimension => {
                    if (dimension.questions.length === 0) {
                        this.refreshDimensionQuestions(dimension.children);
                    } else {
                        for (let index in dimension.questions) {
                            if (dimension.questions[index].sort === this.fill.sort) {
                                dimension.questions.splice(index, 1);
                                dimension.questions.push(this.fill);
                                return;
                            }
                        }
                    }
                });
            },

            async deleteFillUp() {
                let index = this.questionnaire.questions.findIndex(question => question.sort === this.fill.sort);
                this.questionnaire.questions.splice(index, 1);
                this.deleteDimensionQuestion(this.questionnaire.dimensions, this.fill.sort);
                if (this.fill.id !== "") {
                    await this.deleteFillUpAct({id: this.fill.id});
                }
                this.resetSort();
                this.setCurrentQuestionnaire(this.questionnaire);
            },

            deleteDimensionQuestion(dimensions, sort) {
                dimensions.forEach(dimension => {
                    let index = dimension.questions.findIndex(question => question.sort === sort);
                    if (index !== -1) {
                        dimension.questions.splice(index, 1);
                        return;
                    }
                    this.deleteDimensionQuestion(dimension.children, sort);
                })
            },

            resetSort() {
                for (let sort in this.questionnaire.questions) {
                    this.questionnaire.dimensions.forEach(dimension => {
                        this.resetDimensionQuestionSort(dimension, sort + 1, this.questionnaire.questions[sort].sort);
                    });
                    this.questionnaire.questions[sort].sort = parseInt(sort) + 1;
                }
            },

            resetDimensionQuestionSort(dimension, newSort, oldSort) {
                dimension.questions.forEach(question => {
                    if (question.sort === oldSort) {
                        question.sort = newSort;
                    }
                });
                if (dimension.children.length !== 0 && dimension.children) {
                    dimension.children.forEach(child => {
                        this.resetDimensionQuestionSort(child, newSort, oldSort);
                    })
                }
            },

            /**
             *
             * @param step 1下移， -1上移
             */
            questionMove(step) {
                let curSort = this.fill.sort;
                let targetSort = this.fill.sort + step;
                let curIndex = this.questionnaire.questions.findIndex(question => question.sort === curSort);
                let targetIndex = curIndex + step;
                let temp = this.questionnaire.questions[targetIndex];
                Vue.set(this.questionnaire.questions, targetIndex, this.questionnaire.questions[curIndex]);
                Vue.set(this.questionnaire.questions, curIndex, temp);
                // this.questionnaire.questions[targetIndex] = this.questionnaire.questions[curIndex];
                // this.questionnaire.questions[curIndex] = temp;
                let tempSort = 100000;
                for (let dimension of this.questionnaire.dimensions) {
                    this.resetDimensionQuestionSort(dimension, tempSort, curSort);
                }
                for (let dimension of this.questionnaire.dimensions) {
                    this.resetDimensionQuestionSort(dimension, curSort, targetSort);
                }
                for (let dimension of this.questionnaire.dimensions) {
                    this.resetDimensionQuestionSort(dimension, targetSort, tempSort);
                }
                for (let index in this.questionnaire.questions) {
                    this.questionnaire.questions[index].sort = parseInt(index) + 1;
                }
                this.setCurrentQuestionnaire(this.questionnaire);
            }
        },
        watch: {
            currentQuestionnaire() {
                this.questionnaire = this.currentQuestionnaire;
            }
        },
        mounted() {
            //this.questionnaire = this.currentQuestionnaire;

        },
        created() {
            this.questionnaire = this.currentQuestionnaire;
        }
    }
</script>

<style scoped>

</style>
